<template>
	<div class="body">
		<view class="filtrate">
			<uni-data-select v-model="monthA" placeholder="月份" :clear=false :localdata="range"
				@change="month"></uni-data-select>
			<uni-data-select class="type" v-model="kindA" :clear=false placeholder="类型分类" :localdata="type"
				@change="kind"></uni-data-select>
		</view>
		<view class="content">
			<div class="li" v-for="time in streamData">
				<div>
					<div class="title">{{ time.kind.label }}</div>
					<div class="text">{{time.remark}}</div>
				</div>
				<div>
					<div class="num" :style="{color: time.status.theme}">{{ time.status.label=="收益"?"+":"-" }}
						{{ time.amount | formatDecimal }}</div>
					<div class="time">{{ time.createTime }}</div>
				</div>
			</div>

			<!--			 空状态-->
			<div class="null" v-if="show">
				<image src="../../static/null.png" mode="widthFix"></image>
				<div class="text">暂无收益明细～</div>
			</div>
		</view>
	</div>
</template>

<script>
	import Api from "../../API/api";
	export default {
		data() {
			return {
				show: false,
				streamData: [],
				range: [],
				type: [],
				monthA: 0,
				kindA: "",
			}
		},
		filters: {
			formatDecimal(value) {
				// 将值转换为 Number 类型，然后使用 toFixed 方法将其格式化为带有两位小数的字符串
				return Number(value).toFixed(2);
			},
		},
		onLoad() {
			var currentDate = new Date();
			var currentMonth = currentDate.getMonth();
			this.monthA = currentMonth + 1;
			//设置搜索分类
			//设置搜索输入框内容
			this.getStreamType();
			this.getMonth();
			//默认全部搜索
			this.inquiry();
		},
		methods: {
			//查询
			inquiry() {
				Api.getStreamList({
					type: this.kindA,
					month: this.monthA
				}).then(res => {
					console.log(res);
					if (res.data.length <= 0) {
						this.show = true;
					} else {
						this.show = false;
					}
					this.streamData = res.data;
				})
			},
			//月份选着
			month(v) {
				if (v !== "") {
					this.inquiry();
				}
			},
			//类型选着
			kind(v) {
				if (v !== "") {
					this.inquiry();
				}
			},
			//设置类型选择框
			getStreamType() {
				Api.getStreamType().then(res => {
					let arr1 = res.data;
					let arr = [];
					arr1.forEach(x => {
						console.log(x)
						arr.push({
							value: x.value,
							text: x.label
						})
					})
					this.type = arr;
				})
			},
			//设置月份选择框
			getMonth() {
				var currentDate = new Date();
				var currentMonth = currentDate.getMonth();
				this.monthA = currentMonth + 1;
				let arr = Array.from({
					length: currentMonth + 1
				}, (_, index) => index + 1);
				let newArr = []
				arr.forEach(x => {
					newArr.push({
						value: x,
						text: x + "月"
					})
				})
				this.range = newArr.reverse();
			}
		}
	}
</script>

<style lang="less" scoped>
	.filtrate {
		width: 90%;
		margin: 30rpx auto;
		display: flex;

		.type {
			transform: translateX(-100rpx);
		}

		/deep/ .uni-select {
			border-radius: 50rpx;
			width: 196rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
		}
	}

	.content {


		.li {
			width: 90%;
			box-sizing: border-box;
			margin: 30rpx auto;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;

			.title {
				font-weight: 700;
			}

			.num {
				//color: #FD9509;
				text-align: right;
				font-weight: 700;
				font-size: 40rpx;
			}

			.num2 {
				color: #62B801;
				font-weight: 700;
			}

			.text {
				margin-top: 20rpx;
				color: #bbb;
				font-size: 26rpx;
			}

			.time {
				float: right;
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #bbb;
			}

		}
	}

	.null {
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);

		image {
			width: 200rpx;
		}

		.text {
			margin-top: 20rpx;
			color: #aaa;
			font-size: 26rpx;
		}
	}
</style>